<template>
  <div class="welcome-container">
    <div class="statistics">
      <div class="stat-item">
        <div class="stat-icon">
          <el-icon><User /></el-icon>
        </div>
        <div class="stat-info">
          <div class="stat-value" ref="userCount">0</div>
          <div class="stat-label">用户数量</div>
        </div>
      </div>
      <div class="stat-item">
        <div class="stat-icon">
          <el-icon><Document /></el-icon>
        </div>
        <div class="stat-info">
          <div class="stat-value" ref="zhaokaoCount">0</div>
          <div class="stat-label">招考数量</div>
        </div>
      </div>
      <div class="stat-item">
        <div class="stat-icon">
          <el-icon><Document /></el-icon>
        </div>
        <div class="stat-info">
          <div class="stat-value" ref="paperCount">0</div>
          <div class="stat-label">试卷数量</div>
        </div>
      </div>

      <div class="stat-item">
        <div class="stat-icon">
          <el-icon><Collection /></el-icon>
        </div>
        <div class="stat-info">
          <div class="stat-value" ref="questionCount">0</div>
          <div class="stat-label">题目数量</div>
        </div>
      </div>

      <div class="stat-item">
        <div class="stat-icon">
          <el-icon><Reading /></el-icon>
        </div>
        <div class="stat-info">
          <div class="stat-value" ref="essayCount">0</div>
          <div class="stat-label">申论数量</div>
        </div>
      </div>

      <div class="stat-item">
        <div class="stat-icon">
          <el-icon><VideoPlay /></el-icon>
        </div>
        <div class="stat-info">
          <div class="stat-value" ref="courseCount">0</div>
          <div class="stat-label">课程数量</div>
        </div>
      </div>

      <div class="stat-item">
        <div class="stat-icon">
          <el-icon><Money /></el-icon>
        </div>
        <div class="stat-info">
          <div class="stat-value" ref="todaySales">¥0</div>
          <div class="stat-label">今日销售额</div>
        </div>
      </div>

      <div class="stat-item">
        <div class="stat-icon">
          <el-icon><Wallet /></el-icon>
        </div>
        <div class="stat-info">
          <div class="stat-value" ref="totalSales">¥0</div>
          <div class="stat-label">总销售额</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import {
  User,
  Document,
  Collection,
  Reading,
  VideoPlay,
  Money,
  Wallet,
} from '@element-plus/icons-vue';
import { welcomeStatic } from '@/api/zhaokao/common';

const userCount = ref(null);
const paperCount = ref(null);
const questionCount = ref(null);
const essayCount = ref(null);
const courseCount = ref(null);
const todaySales = ref(null);
const totalSales = ref(null);
const zhaokaoCount = ref(null);

const animateNumber = (el, start, end, prefix = '', duration = 1000) => {
  const startTime = performance.now();
  const updateNumber = currentTime => {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);

    // 使用 easeOutExpo 缓动函数让动画更自然
    const easeProgress = 1 - Math.pow(2, -10 * progress);

    const current = Math.round(start + (end - start) * easeProgress);

    // 不使用 toLocaleString 避免数字格式化导致的问题
    el.textContent = prefix + current;

    if (progress < 1) {
      requestAnimationFrame(updateNumber);
    } else {
      // 确保最终显示的是精确的目标值
      el.textContent = prefix + end;
    }
  };
  requestAnimationFrame(updateNumber);
};

onMounted(async () => {
  try {
    const res = await welcomeStatic();
    console.log(res);
    if (res.code === 200 && res.success) {
      const data = res.data;
      console.log('Animation data:', data); // 添加日志查看实际数据

      // 延迟一点开始动画，让页面完全加载
      setTimeout(() => {
        if (userCount.value) animateNumber(userCount.value, 0, Number(data.userCount) || 0);
        if (paperCount.value) animateNumber(paperCount.value, 0, Number(data.paperCount) || 0);
        if (questionCount.value)
          animateNumber(questionCount.value, 0, Number(data.questionCount) || 0);
        if (essayCount.value) animateNumber(essayCount.value, 0, Number(data.essayCount) || 0);
        if (courseCount.value) animateNumber(courseCount.value, 0, Number(data.courseCount) || 0);
        if (todaySales.value) animateNumber(todaySales.value, 0, Number(data.todaySales) || 0, '¥');
        if (totalSales.value) animateNumber(totalSales.value, 0, Number(data.totalSales) || 0, '¥');
        if (zhaokaoCount.value)
          animateNumber(zhaokaoCount.value, 0, Number(data.zhaokaoCount) || 0);

      }, 300);
    }
  } catch (error) {
    console.error('Failed to fetch welcome statistics:', error);
  }
});
</script>

<style scoped>
.welcome-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf3 100%);
}

.statistics {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  padding: 30px;
  justify-content: flex-start;
}

.stat-item {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.85);
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border-left: 4px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
  min-width: 220px;
}

.stat-icon {
  font-size: 2.2rem;
  margin-right: 20px;
  opacity: 0.9;
  transition: transform 0.3s ease;
}

.stat-info {
  text-align: left;
}

.stat-value {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 1.1rem;
  opacity: 0.8;
}

/* 用户数量 - 蓝色主题 */
.stat-item:nth-child(1) {
  border-left-color: #409eff;
}
.stat-item:nth-child(1) .stat-icon {
  color: #409eff;
}
.stat-item:nth-child(1) .stat-value {
  color: #2d6dbb;
}
.stat-item:nth-child(1):hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.15);
}

/* 试卷数量 - 绿色主题 */
.stat-item:nth-child(2) {
  border-left-color: #67c23a;
}
.stat-item:nth-child(2) .stat-icon {
  color: #67c23a;
}
.stat-item:nth-child(2) .stat-value {
  color: #4a8c2a;
}
.stat-item:nth-child(2):hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(103, 194, 58, 0.15);
}

/* 题目数量 - 紫色主题 */
.stat-item:nth-child(3) {
  border-left-color: #8957e5;
}
.stat-item:nth-child(3) .stat-icon {
  color: #8957e5;
}
.stat-item:nth-child(3) .stat-value {
  color: #6a3eb0;
}
.stat-item:nth-child(3):hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(137, 87, 229, 0.15);
}

/* 申论数量 - 橙色主题 */
.stat-item:nth-child(4) {
  border-left-color: #e6a23c;
}
.stat-item:nth-child(4) .stat-icon {
  color: #e6a23c;
}
.stat-item:nth-child(4) .stat-value {
  color: #b88230;
}
.stat-item:nth-child(4):hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(230, 162, 60, 0.15);
}

/* 课程数量 - 青色主题 */
.stat-item:nth-child(5) {
  border-left-color: #36cfc9;
}
.stat-item:nth-child(5) .stat-icon {
  color: #36cfc9;
}
.stat-item:nth-child(5) .stat-value {
  color: #2a9e99;
}
.stat-item:nth-child(5):hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(54, 207, 201, 0.15);
}

/* 今日订单销售额 - 粉色主题 */
.stat-item:nth-child(6) {
  border-left-color: #f56c6c;
}
.stat-item:nth-child(6) .stat-icon {
  color: #f56c6c;
}
.stat-item:nth-child(6) .stat-value {
  color: #c75151;
}
.stat-item:nth-child(6):hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(245, 108, 108, 0.15);
}

/* 总销售额 - 深蓝主题 */
.stat-item:nth-child(7) {
  border-left-color: #4a5bdc;
}
.stat-item:nth-child(7) .stat-icon {
  color: #4a5bdc;
}
.stat-item:nth-child(7) .stat-value {
  color: #394499;
}
.stat-item:nth-child(7):hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(74, 91, 220, 0.15);
}

@media (max-width: 768px) {
  .statistics {
    padding: 15px;
    gap: 15px;
  }

  .stat-item {
    padding: 20px;
    min-width: 100%;
  }
}
</style>

<style lang="scss" scoped></style>
